<template>
  <view class="index_warp safety">
    <template v-if="type === 'book'">
      <view class="addr_warp flex" @click="chooseAddress">
        <view class="iconfont icon-address" />
        <template v-if="!receiveInfo.id"> 选择收获地址 </template>
        <template v-else>
          <view class="show_content">
            <view class="header">
              {{ receiveInfo.receiveName }} {{ receiveInfo.receivePhone }}
            </view>
            <view class="address">
              {{ receiveInfo.receiveArea }} {{ receiveInfo.receiveAddress }}
            </view>
          </view>
        </template>
      </view>
    </template>

    <view class="order_car">
      <!-- <view class="order_num">
        <view class="name">订单编号：</view>
        <view class="num">564656316316</view>
      </view> -->
      <view class="item">
        <view class="item_image">
          <image
            :src="item.commodityAttachementVOS[0].fileUrl"
            v-if="type === 'book'"
            mode="widthFix"
          ></image>
          <image v-else :src="item.coverPath" mode="widthFix" />
        </view>
        <view class="right">
          <view class="name">{{ item.name }}</view>
          <view class="study" v-if="type != 'book'"
            >共{{ item.classHour }}课时</view
          >
        </view>
      </view>
      <view class="pay_money">
        <view class="left"></view>
        <view class="r">
          <view class="title">实付积分：</view>
          <view class="money">
            <template v-if="type === 'book'">
              {{ item.coinPrice }}
            </template>
            <template v-else-if="item.level === '6'">
              {{ item.groupGold }}
            </template>
            <template v-else-if="item.level === '5'">
              {{ item.seckillGold }}
            </template>
            <template v-else>
              {{ item.gold }}
            </template>
            积分
          </view>
        </view>
      </view>
    </view>

    <view class="bottom_warp">
      <view class="btn_warp">
        <template v-if="item.level === '6'">
          <view
            class="left_btn btn"
            :style="{
              color: '#f34334',
            }"
            @click="clickBottomBtn(0)"
          >
            {{ item.groupGold }}积分
          </view>
          <view class="right_btn btn" @click="clickBottomBtn(1)">
            发起拼团
          </view>
        </template>
        <template v-else-if="item.level === '5'">
          <view
            class="left_btn btn"
            :style="{
              color: '#f34334',
            }"
            @click="clickBottomBtn(0)"
          >
            {{ item.seckillGold }}积分
          </view>
          <view class="right_btn btn" @click="clickBottomBtn(1)">
            立即购买
          </view>
        </template>
        <template v-else>
          <view
            class="left_btn btn"
            :style="{
              color: '#f34334',
            }"
            @click="clickBottomBtn(0)"
          >
            <template v-if="type === 'book'">
              {{ item.coinPrice }}
            </template>
            <template v-else>
              {{ item.gold }}
            </template>
            积分
          </view>
          <view class="right_btn btn" @click="clickBottomBtn(1)">
            立即购买
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
import { getIntroduce, joinGroup, createGroup } from "@/api/course.js";
import { goldBuyGoods } from "@/api/buy.js";
import { getBookDetail } from "@/api/book";
export default {
  data() {
    return {
      item: {},
      type: "",
      receiveInfo: {}, // 选中地址
    };
  },
  onLoad(options) {
    console.log(options);
    if (options.type === "book") {
      this.getBookDetail(options.id);
      this.type = options.type;
    } else {
      this.getCourseDetail(options.id);
    }
  },
  methods: {
    clickBottomBtn() {
      // playType	1：点播 2：直播 （课程专属）3:随身听
      // 类型 0点播 1直播 2随身听 3商品
      const { item, type } = this;
      if (type === "book") {
        const { receiveInfo } = this;
        if (!receiveInfo.id) {
          this.$ShowToast({
            title: "请选择收获地址",
            mask: false,
          });
          return;
        }
        const params = {
          type: 3,
          id: item.id,
          receiveInfoId: receiveInfo.id,
        };
        goldBuyGoods(params).then((res) => {
          this.$u.route("/pages/my_book/my_book");
        });
      } else {
        if (item.level === "6") {
          createGroup({
            // 发起拼团
            coursePackageId: item.id,
          }).then((res) => {
            console.log(res);
          });
        } else if (item.level === "5") {
        } else {
          goldBuyGoods({
            // 直接购买
            type: item.playType - 1,
            id: item.id,
          }).then((res) => {
            this.$u.route("/pages/course-detail/course-detail", {
              id: item.id,
            });
          });
        }
      }
    },
    chooseAddress() {
      uni.navigateTo({
        url: "/pages/choose_address/choose_address",
        events: {
          choose: (data) => {
            this.receiveInfo = data;
          },
        },
      });
    },
    getBookDetail(id) {
      getBookDetail({
        id,
      }).then((res) => {
        console.log(res);
        this.item = res;
      });
    },
    getCourseDetail(id) {
      getIntroduce({
        id,
      }).then((res) => {
        this.item = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.index_warp {
  margin-bottom: 150upx;
  padding: 10upx 30upx;

  .addr_warp {
    width: 100%;
    padding: 20upx 30upx;
    margin: 20upx 0;
    background-color: #fff;
    border-radius: 15upx;
    font-size: 32upx;
    font-weight: 500;

    .iconfont {
      font-size: 40upx;
      margin-right: 10upx;
      color: #007aff;
    }

    .show_content {
      .header {
        font-size: 28upx;
        font-weight: 600;
      }

      .address {
        margin-top: 10upx;
      }
    }
  }

  .order_car {
    width: 690upx;
    background: #ffffff;
    box-shadow: 0px 6upx 12upx rgba(0, 122, 255, 0.05);
    border-radius: 20upx;
    padding: 30upx;
    margin-bottom: 30upx;

    .order_num {
      display: flex;
      padding-bottom: 10upx;
      margin-bottom: 10upx;
      border-bottom: 2upx solid #ccc;
    }

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .item_image {
        width: 180upx;
        border-radius: 10upx;
        overflow: hidden;
        flex-shrink: 0;
      }

      .right {
        margin-left: 30upx;
        width: 420upx;

        .name {
          height: 80upx;
          font-weight: bold;
          line-height: 40upx;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        .study {
          margin-top: 6upx;
          font-size: 24upx;
          line-height: 34upx;
          color: #999999;
        }
      }
    }

    .pay_money {
      margin-top: 20upx;
      width: 100%;
      height: 56upx;
      text-align: right;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .r {
        display: flex;
        align-items: center;

        .title {
          width: 120upx;
          height: 34upx;
          font-size: 24upx;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 34upx;
          color: #666666;
        }

        .money {
          height: 56upx;
          font-size: 40upx;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 40upx;
          color: #f34235;

          text {
            color: #f34235;
            font-size: 28upx;
          }
        }
      }
    }
  }

  .pay_way {
    margin-bottom: 30upx;
    width: 690upx;
    height: 110upx;
    background: #ffffff;
    box-shadow: 0px 6upx 12upx rgba(0, 122, 255, 0.05);
    opacity: 1;
    border-radius: 20upx;
    padding: 0 30upx 0 20upx;

    .left {
      .image {
        width: 60upx;
        height: 60upx;
      }

      .pay_name {
        margin-left: 30upx;
        height: 44upx;
        font-size: 32upx;
        font-family: PingFang SC;
        font-weight: bold;
        line-height: 44upx;
      }
    }

    .pay_chack {
    }
  }

  .bottom_warp {
    width: 100%;
    background: #fff;
    position: fixed;
    left: 0;
    bottom: 0;

    .btn_warp {
      width: 100%;
      height: 60px;
      border-radius: 20upx 20upx 0 0;
      display: flex;
      align-items: center;

      .left_btn {
        background: #fff;
      }

      .right_btn {
        flex: 1;
        color: #fff;
        background: linear-gradient(to right, #fe9601, #f34334);
      }

      .btn {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36upx;
        font-weight: 700;
      }
    }
  }
}
</style>
